<!DOCTYPE html>
<html lang="zh">
<#
 include "head.html";
 #>
<body>
<div class="lyear-layout-web">
  <div class="lyear-layout-container">
    <!--左侧导航-->
    <#
     include "lefter.html";
     #>
    <!--End 左侧导航-->
    <!--头部信息-->
    <#
     include "header.html";
     #>
    <!--End 头部信息-->
    <!--页面主要内容-->
    <main class="lyear-layout-content">
      
      <div class="container-fluid">
        
        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <div class="card-body">
                
                <div class="table-responsive">
                  <table class="table table-bordered">
                    <thead>
                      <tr>
                        <th>
                          <label class="lyear-checkbox checkbox-primary">
                            <input type="checkbox" id="check-all"><span></span>
                          </label>
                        </th>
                        <th>编号</th>
                        <th>协议</th>
                        <th>外网(http[s]/tcp)</th>
                        <th>内网</th>
                        <th>操作(<a href="clients_mappings_add?clientId=${client.id}"><i class="mdi mdi-plus" title="新增"></i></a>|<a href="javascript:itemsDel()"><i class="mdi mdi-window-close" title="删除"></i></a>)</th>
                      </tr>
                    </thead>
                    <tbody>
                    <#
                     for($clientMapping : $clientMappings)
                     #>
                      <tr>
                        <td>
                          <label class="lyear-checkbox checkbox-primary">
                            <input type="checkbox" name="ids[]" value="${clientMapping.id}"><span></span>
                          </label>
                        </td>
                        <td>${clientMapping.id}</td>
                        <td>${clientMapping.serverProtocol}</td>
                        <#
                         if ($clientMapping.serverProtocol == "HTTP")
                         #>
                        <td>${clientMapping.serverIpPort}.${server.domain}</td>
                        <#
                         else
                         #>
                         <td>${server.ip}:${clientMapping.serverIpPort}</td>
                         <#
                          fi;
                          #>
                        <td>${clientMapping.localIpPort}</td>
                        <td>
                          <div class="btn-group">
                            <a class="btn btn-xs btn-default" href="clients_mappings_edit?id=${clientMapping.id}" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>
                            <a class="btn btn-xs btn-default" href="javascript:itemDel('${clientMapping.id}')" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>
                          </div>
                        </td>
                      </tr>
                    <#
                     rof;
                     #>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          
        </div>
        
      </div>
      
    </main>
    <!--End 页面主要内容-->
  </div>
</div>
<#
 include "js.html";
 #>
<script src="js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="js/lightyear.js"></script>
 <script type="text/javascript">
     function itemDel(id) {
   	        lightyear.loading('show');
    	    $.ajax({
    	        type: "POST",
    	        url: "/openapi/v1/client/mapping/del",
    	        contentType: "application/json;charset=utf-8",
    	        data:JSON.stringify({"ids":id}),
    	        dataType: "json",
    	        success:function (message) {
    	            lightyear.loading('hide');
    	            if (message.sta == 0) {
    	                location.href = "clients_mappings?clientId=${client.id}&utm_source=/clients_mappings_del";
    	            } else {
    	                lightyear.notify(message.msg, 'danger', 1000);
    	            }
    	        },
    	        error:function (message) {
    	            lightyear.loading('hide');
    	            lightyear.notify('服务器错误，请稍后再试~', 'danger', 100);
    	        }
    	    });
     }
     
     function itemsDel() {
         var cbs = $("input[name='ids[]']:checked");
         if (cbs != null && cbs.length > 0) {
             var arr=[];
             for (var i = 0; i < cbs.length; i++ ){
                 arr.push(cbs[i].value);
             }
             itemDel(arr.join(","));
         }
     }
 </script>
</body>
</html>